<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网上跳蚤市场</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
    <div class="container">
        <div class="logo">
            <h1>跳蚤市场</h1>
        </div>
        <nav class="main-nav">
            <ul>
                <li><a href="index.html" class="active">首页</a></li>
                <li><a href="#">二手图书</a></li>
                <li><a href="#">电子数码</a></li>
                <li><a href="#">生活用品</a></li>
                <li><a href="#">其他</a></li>
            </ul>
        </nav>
        <div class="user-actions">
            <a href="login.html" id="login-btn">登录</a>
            <a href="register.html" id="register-btn">注册</a>
            <a href="user-center.html" id="user-center-btn" style="display:none;">用户中心</a>
            <a href="cart.html" class="cart-icon">🛒<span id="cart-count">0</span></a>
        </div>
    </div>
</header>

<main class="main-content">
    <div class="container">
        <section class="search-section">
            <input type="text" placeholder="搜索商品..." id="search-input">
            <button id="search-btn">搜索</button>
            <button id="advanced-search-btn">高级搜索</button>
        </section>

        <section class="category-filter">
            <h2>商品分类</h2>
            <div class="category-list" id="category-list">
                <!-- 分类将通过JS动态加载 -->
            </div>
        </section>

        <section class="product-list">
            <div class="sort-options">
                <span>排序方式：</span>
                <select id="sort-select">
                    <option value="newest">最新发布</option>
                    <option value="price-asc">价格从低到高</option>
                    <option value="price-desc">价格从高到低</option>
                    <option value="popular">最受欢迎</option>
                </select>
            </div>

            <div class="products-container" id="products-container">
                <!-- 商品将通过JS动态加载 -->
            </div>

            <div class="pagination" id="pagination">
                <!-- 分页将通过JS动态生成 -->
            </div>
        </section>
    </div>
</main>

<footer class="footer">
    <div class="container">
        <p>&copy; 2023 网上跳蚤市场. 版权所有.</p>
    </div>
</footer>

<script src="js/main.js"></script>
</body>
</html>